<!DOCTYPE html>
<html lang="zh_CN" xmlns:th="http://www.thymeleaf.org"
      xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">

<!-- head 头部-->
<head th:replace="admin/layout/include::head('类型管理','/assets/module/dtree/dtree.css,/assets/module/dtree/font/dtreefont.css')"></head>

<body>
<!-- menu form -->
<form id="type-form" lay-filter="type-form" class="layui-form model-form">
    <input name="id" type="hidden"/>
    <div class="layui-form-item">
        <label class="layui-form-label required">类型名称</label>
        <div class="layui-input-block">
            <input name="typeName" placeholder="请输入菜单名称" type="text" class="layui-input" maxlength="50"
                   lay-verType="tips" lay-verify="required" required/>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">备注</label>
        <div class="layui-input-block">
            <textarea name="remark" placeholder="请输入内容" class="layui-textarea" maxlength="200"></textarea>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">上级菜单</label>
        <div class="layui-input-block">
            <ul id="parentId" class="dtree" data-id="0"></ul>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">排序号</label>
        <div class="layui-input-block">
            <input name="orderNo" placeholder="请输入排序号" type="number" class="layui-input"/>
        </div>
    </div>

    <div class="layui-form-item text-right">
        <button class="layui-btn layui-btn-primary" type="button" ew-event="closeDialog">取消</button>
        <button class="layui-btn" lay-filter="type-form-submit" lay-submit>保存</button>
    </div>
</form>
<!-- js部分 -->
<div th:replace="admin/layout/include::js"></div>
<script>
    layui.use(['layer', 'admin', 'form','dtree'], function () {
        var layer = layui.layer;
        var admin = layui.admin;
        var form = layui.form;
        var dtree = layui.dtree;

        form.render('radio');
        form.render('select');

        // 回显数据
        var type = admin.getTempData('t_type');
        if (type) {
            form.val('type-form', type);
        }
        var response = {
            statusName: "success", //返回标识（必填）
            statusCode: true, //返回码（必填）
            message: "msg", //返回信息（必填）
            rootName: "data", //根节点名称（必填）
            treeId: "id", //节点ID（必填）
            parentId: "parentId", //父节点ID（必填）
            title: "typeName", //节点名称（必填）
        };
        var typeTreeSelect = dtree.renderSelect({
            elem: "#parentId",
            url: "/admin/blogType/treeSelect",
            method: 'GET',
            dataStyle: "layuiStyle",  //使用layui风格的数据格式
            dataFormat: "list",  //配置data的风格为list
            skin: "zdy",
            response:response,
            done: function(){
                if(type){
                    dtree.dataInit("parentId", type.parentId);
                    dtree.setSelectValue("parentId");
                }
                //dtree.dataInit("selTree3", "001003");
                //dtree.setSelectValue("selTree3"); // 也可以在这里指定，第二个参数如果不填，则会自动读取
            }
        });
        // 表单提交事件
        form.on('submit(type-form-submit)', function (data) {
            data.field.parentId = dtree.getNowParam(typeTreeSelect).nodeId;
            layer.load(2);
            B.post({
                url:'/admin/blogType/',
                loading:true,
                data:data.field,
                success:function (res) {
                    if(res.success){
                        top.layer.msg(res.msg,{icon: 1});
                        admin.putTempData("formOk",true);
                        // 关闭当前iframe弹出层
                        parent.layer.close(parent.layer.getFrameIndex(window.name));
                    }else{
                        top.layer.msg(data.msg, {icon: 2});
                    }

                }
            });
            return false;
        });
    });
</script>
</body>
</html>